<template>
  <div class="pdf-view-container" id="pdfView">
    <navbar :title="name"></navbar>
    <van-list
      class="list nav-top"
      ref="pdfContent"
      v-model="loading"
      :finished="finished"
      @load="onLoad"
    >
      <pdf
        v-for="i in numPages"
        :key="i"
        :page="i"
        :src="src"
        @page-loaded="onPageLoaded"
        @error="onError"
      ></pdf>
    </van-list>
    <water-mark></water-mark>
  </div>
</template>

<script>
import { Base64 } from 'js-base64'
import Navbar from '@/components/Navbar'
import { courseLearnProcessSaveApi } from '@/api/home'
import pdf from 'vue-pdf'
import WaterMark from '@/components/WaterMark'
export default {
  components: {
    pdf,
    Navbar,
    WaterMark,
  },
  props: {
    url: String,
    name: String,
    progress: String,
    courseId: String,
    wareId: String,
    wareType: String,
  },
  data() {
    return {
      src: '',
      numPages: 1,
      loading: false,
      finished: false,
      totalPage: undefined,
    }
  },
  mounted() {
    let loadingTask = pdf.createLoadingTask(Base64.decode(this.url))
    loadingTask.promise
      .then((res) => {
        this.totalPage = res.numPages
        this.numPages = this.startPage
        // 处理学习进度
      })
      .catch(() => {})
    this.src = loadingTask
  },
  beforeDestroy() {
    let percent
    if (this.totalPage && this.numPages) {
      percent = Math.floor(((this.numPages - 1) / this.totalPage) * 100)
    }
    if (!percent) {
      percent = 0
    }
    this.recordPercent(percent)
  },
  methods: {
    onLoad() {
      if (!this.totalPage) {
        return false
      }
      if (this.numPages >= this.totalPage) {
        this.finished = true
      }
      this.numPages += 1
      this.loading = false
    },
    onPageLoaded(e) {
      if (e == this.startPage) {
        this.$nextTick(() => {
          let el = document.getElementById('pdfView')
          if (this.startPage > 2) {
            window.scrollTo(0, el.scrollHeight)
          }
          this.onLoad()
        })
      }
    },
    onError() {
      this.loading = false
      this.finished = true
    },
    recordPercent(percent) {
      if (this.courseId == -1 || !this.wareId == -1 || !this.wareType == -1) {
        return false
      }
      let params = {
        courseId: this.courseId,
        wareId: this.wareId,
        wareType: this.wareType,
        progress: percent,
        allprogress: 100,
        totalSlide: percent,
      }
      courseLearnProcessSaveApi(params).then((res) => {
        console.log(res)
      })
    },
  },
  computed: {
    startPage() {
      let start = 1
      let progress = parseInt(this.progress)
      if (!progress) progress = 0
      progress = Math.max(1, progress)
      try {
        start = Math.ceil((this.totalPage * progress) / 100)
      } catch (error) {
        console.log(error)
      }
      return start
    },
  },
}
</script>

<style lang="scss" scoped>
.pdf-view-container {
  .list {
    min-height: 100vh;
    box-sizing: border-box;
    background: #ffffff;
  }
}
</style>
